<template>
	<view class="card">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item  v-for="(banner,index) in currentList.category.bannerUrlList" :key="banner">
				<view class="swiper-item">
					<image class="swiperImg" :src="banner" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 字体 -->
		<view class="cardTitle">{{currentList.category.name}}</view>
		<view class="cardText">{{currentList.category.frontDesc}}</view>
		<!-- 商品列表 -->
		<view class="goodsList">
			<view class="goodsItem" @click="toDetail(current)" v-for="(current,index) in currentList.itemList" :key="current.id">
				<image class="goodsImg" :src="current.primaryPicUrl" mode=""></image>
				<text class="goodsName">{{current.name}}</text>
				<text class="goodsPice">{{current.retailPrice}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		props:['defaultId'],
		mounted() {
			this.getIndexCateList()
		},
		methods:{
			getIndexCateList(){
				this.$store.dispatch('getIndexCateList')
			},
			toDetail(current){
				wx.navigateTo({
					// 路由传参不能传递对象，可以转换成为json字符串，但是在vue中超过一定长度后会被截掉，所以一般保存在本地
					url:'/pages/detail/detail?goods=' + JSON.stringify(current)
				})
			}
		},
		computed:{
			...mapState({
				indexList:state=>state.home.indexList || []
			}),
			currentList(){
				let result = this.indexList.find(item=>item.category.parentId === this.defaultId) || {}
				// console.log(result)
				return result
			}
		}
	}
</script>

<style lang="stylus">
	.card
		.swiper
			.swiper-item
				.swiperImg
					width 100%
					height 300rpx
		.cardText,.cardTitle
			text-align center
		.goodsList
			display  flex
			flex-wrap wrap
			justify-content space-around
			&::after
				content ''
				width 344rpx
			.goodsItem
				display flex
				flex-direction column
				width 344rpx
				.goodsImg
					width 344rpx
					height 344rpx
</style>
